import React, { Component } from 'react'
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
import './myswiper.less'
import Pagination from './pagination';
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

export default class Myswiper extends Component{
    constructor(){
        super()
        this.state={
            index:0
        }
        this.handleChangeIndex=this.handleChangeIndex.bind(this)
    }
    handleChangeIndex = (index) => {
        this.setState({
          index,
        });
      };
    render(){
        return(
            <div className='myswiper'>
                <AutoPlaySwipeableViews index={this.state.index} onChangeIndex={this.handleChangeIndex}>
                    {this.props.imgs.map((ele,index)=>{
                        return <div key={index}>
                            <img src={ele}
                             alt=""/>
                        </div>
                    })}
                </AutoPlaySwipeableViews>
                <Pagination 
                    curindex={this.state.index} 
                    num={this.props.imgs.length}
                    getindex={this.handleChangeIndex}
                />
            </div>
        )
    }
}